<template>
	<div>
		<span 
			class="customer_tags" 
			v-for="item in tagsAllList" 
			:style="[{'background': item.color }, {'border-color': item.color}]">
			{{item.name}}
			<span><i class="el-icon-success"></i></span>
		</span>
	</div>
</template>

<script>
	export default {
		props:['tagsList'],//后台传过来的选中的集合
		data() {
			return {
				tagsAllList:[],
			}
		},
		created() {
			this.getTabel()
		},
		watch:{
			'tagsList': function(){
				this.getTabel()
			},
		},
		methods: {
			getTabel(){
				var that = this
				that.tagsAllList = that.tagsList
			},
		}
	}
</script>
<style>
	.customer_tags{
		display: inline-block;
		min-width: 80px;
	    padding: 0 5px;
	    margin-right: 15px;
	    margin-bottom: 20px;
	    text-align: center;
	    border: 1px solid;
	    border-radius: 8px;
	    color: #FFFFFF;
	    box-shadow: 0 4px 10px 0 rgb(0,0,0,.1);
	    cursor: pointer;
	}
</style>